<script setup>
import {ref,reactive, onMounted} from 'vue'
//import {useMemberCardStore} from '@/store/memberCard'
import {useCourseStore} from '@/store/course'
import { storeToRefs } from 'pinia'
import {ElMessageBox} from 'element-plus'
import memberCardApi from '@/api/memberCard'

// 相关数据
//const memberCardStore = useMemberCardStore()
//const {memberCards} = storeToRefs(memberCardStore)
const courseStore = useCourseStore()
const {courses} = storeToRefs(courseStore)

const memberCards = ref([])

// 添加和编辑会员卡
const curView = ref('memberCard')

const memberCardForm = reactive({
    id: '',
    memberCardName: '',
    price: 0,
    description: '',
    remark: '',
    type: '',
    availableTimes: 0,
    availableDays: 0,
    supportCourses: [],
})

const showAddMemberCard = () => {
    curView.value = 'addMemberCard'
    clearForm()
}

const clearForm = () => {
    memberCardForm.id = ''
    memberCardForm.memberCardName = ''
    memberCardForm.price = 0
    memberCardForm.description = ''
    memberCardForm.remark = ''
    memberCardForm.type = ''
    memberCardForm.availableTimes = 0
    memberCardForm.availableDays = 0
    memberCardForm.supportCourses = []
}

const showEditMemberCard = async (id) => {
    curView.value = 'editMemberCard'
    //const memberCard = memberCardStore.getMemberCardById(id)
    const res = await memberCardApi.getMemberCardById(id)
    const memberCard = res.data.data
    memberCardForm.id = id
    memberCardForm.memberCardName = memberCard.memberCardName
    memberCardForm.price = memberCard.price
    memberCardForm.description = memberCard.description
    memberCardForm.remark = memberCard.remark
    memberCardForm.type = memberCard.type
    memberCardForm.availableTimes = memberCard.availableTimes
    memberCardForm.availableDays = memberCard.availableDays
    memberCardForm.supportCourses = memberCard.supportCourses
}

const addOrEditMemberCard = () => {
    if(curView.value === 'addMemberCard'){
        addMemberCard()
    }
    else if (curView.value === 'editMemberCard'){
        editMemberCard(memberCardForm.id)
    }
}

const addMemberCard = async () => {
    //memberCardStore.addMemberCard(memberCardForm)
    await memberCardApi.addMemberCard(memberCardForm)
    const res = await memberCardApi.getMemberCards()
    memberCards.value = res.data.data
    curView.value ='memberCard'
    clearForm()
}

const editMemberCard = async () => {
    //memberCardStore.editMemberCard(memberCardForm)
    await memberCardApi.editMemberCard(memberCardForm)
    const res = await memberCardApi.getMemberCards()
    memberCards.value = res.data.data
    curView.value ='memberCard'
}

// 删除会员卡
const showDeleteMemberCardMessage = (id) =>{
    ElMessageBox.confirm('确认删除此会员卡信息吗? 删除后将无法恢复，请谨慎操作！', '删除确认', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async action => {
            if (action === 'confirm') {
                await deleteMemberCard(id)
                ElMessageBox.alert('会员卡信息已删除', {
                    type: 'success'
                });
            }
        }
    })
}

const deleteMemberCard = async (id) =>{
    await memberCardApi.deleteMemberCardById(id)
    const res = await memberCardApi.getMemberCards()
    memberCards.value = res.data.data
}

// 分页
const pageData = reactive({
    pageCurrent:1,
    pageSize:10,
})

const handleCurrentChange = (val) => {
    pageData.pageCurrent = val;
}

// 必填信息
const rules = {
    memberCardName: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
    type: [{ required: true, message: '此字段为必填', trigger: 'blur' }],
}

onMounted(async () => {
    let res = await memberCardApi.getMemberCards()
    memberCards.value = res.data.data
})

</script>

<template>
    <!-- 会员卡页面 -->
    <div class="member-card" v-if="curView ==='memberCard'">
        <div class="handle-box">
            <el-button type="primary" @click="showAddMemberCard">添加会员卡</el-button>
        </div>
        <el-divider></el-divider>
        <el-table :data="memberCards.slice((pageData.pageCurrent-1)*pageData.pageSize,pageData.pageCurrent*pageData.pageSize)" style="width: 100%;" stripe border>
            <el-table-column prop="memberCardName" label="会员卡名称" width="180" sortable />
            <el-table-column prop="price" label="价格" sortable />
            <el-table-column prop="type" label="类型" sortable />
            <el-table-column prop="availableTimes" label="可用次数" sortable />
            <el-table-column prop="availableDays" label="有效天数" sortable />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="showEditMemberCard(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="small" @click="showDeleteMemberCardMessage(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-row>
            <el-col :span="20">
                <el-pagination  v-model:current-page="pageData.pageCurrent"
                :page-size="pageData.pageSize"
                layout="prev, pager, next"   
                :total="memberCards.length"
                prev-text="上一页"
                next-text="下一页"
                @current-change="handleCurrentChange" />
            </el-col>
            <el-col :span="4" style="font-size: 14px;">
                <span>当前 {{(pageData.pageCurrent-1)*pageData.pageSize+1}} 条到 {{Math.min(pageData.pageSize*pageData.pageCurrent,memberCards.length) }} 条，共 {{memberCards.length}} 条</span> 
            </el-col>
        </el-row>
    </div>

    <!-- 添加和编辑会员卡页面 -->
    <div class="edit-member-card" v-else-if="curView === 'editMemberCard' || curView === 'addMemberCard'">
        <el-form :model="memberCardForm" label-position="right" label-width="100px" style="margin-left: 50px" :rules="rules">
            <el-form-item label="会员卡名称" prop="memberCardName">
                <el-input v-model="memberCardForm.memberCardName" placeholder="会员卡名称" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input-number v-model="memberCardForm.price"></el-input-number>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input type="textarea" v-model="memberCardForm.description" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="memberCardForm.remark" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="memberCardForm.type" placeholder="会员卡类型" style="width:600px">
                    <el-option value="次卡(有期限)"></el-option>
                    <el-option value="次卡(无期限)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可用次数" prop="availableTimes">
                <el-input-number v-model="memberCardForm.availableTimes"></el-input-number>
            </el-form-item>
            <el-form-item label="有效天数" prop="availableDays">
                <el-input-number v-model="memberCardForm.availableDays"></el-input-number>
            </el-form-item>
            <el-form-item label="支持课程" prop="supportCourses">
                <el-select v-model="memberCardForm.supportCourses" placeholder="支持课程" style="width:600px"  multiple>
                    <el-option v-for="course in courses" :key="course.id" :label="course.courseName" :value="course.id"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrEditMemberCard">保存</el-button>
                <el-button type="info" @click="curView = 'memberCard'">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>

</style>
